import React, { Component } from 'react';

// 1.0 导入antd-mobeile中的的NavBar
import { NavBar } from 'antd-mobile';

// 导入方法
import { get_Current_City, get_House_Data, get_House_List } from '../../utils/http_biz.js'

import './findhouse.scss'
import '../../assets/fonts/iconfont.css'

const BMap = window.BMap;
// 全局变量用来定义当前渲染的数据是哪一层，规则： 1: 区   2：区下面的镇  3：镇下面的小区
let currentLevel = 1;

class FindHouse extends Component {
    state = {
        list: [], // 存储服务器响应回来的房屋列表数据
        isshow: false // 用来控制房屋列表是否显示
    }

    componentDidMount() {
        // 0.0 在页面加载完成之后渲染地图
        this.renderMap();
    }
    // 定义了一个组件对象实例成员map,代表map对象
    map = null

    // 1.0 定义一个地图渲染方法
    renderMap = async () => {
        // 根据容器实例化地图对象
        var map = new BMap.Map("maparea");
        this.map = map;
        // 渲染地图
        // 参数1：经纬度对象,当前城市的经纬度对象
        // 1.0 获取当前城市的经纬度对象
        // 1.0.1 获取到当前城市
        let { label, value } = await get_Current_City();

        // 1.0.2  var myGeo = new BMap.Geocoder(); 中的getPoint获取城市经纬度对象
        // 创建地理位置对象
        var myGeo = new BMap.Geocoder();
        // 调用地理位置对象的getPoint方法来获取当前城市对应的经纬度信息
        // myGeo.getPoint('地址', 回调函数中会获取该地址对应的经纬度对象，'表示第一个参数的详细地址是属于哪个城市的，如果没有填写，默认是北京')

        myGeo.getPoint(label, async (point) => {
            // point：表示获取当前lable变量对应的城市的经纬度对象
            // 参数2：缩放级别 ： 11
            map.centerAndZoom(point, 11)

            // 添加平移缩放控件和比例尺控件
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());

            // 等地图渲染完成以后，请求服务器数据然后文本标记物到地图上
            await this.getHouseSource(value);

        }, label)
    }

    // 2.0 根据城市、区、镇的id值获取下一级的数据
    getHouseSource = async (cityValue) => {
        // 2.0.1 获取到房源信息数据
        let { body } = await get_House_Data({ id: cityValue });

        // 2.0.2 遍历body数组生成文本覆盖物
        body.forEach(item => {
            /*
            item的格式：
            {
                "label": "白云",
                "value": "AREA|8b5511b3-7699-f921",
                "coord": {
                    "latitude": "23.17599",
                    "longitude": "113.261927"
                },
                "count": 375
            },
                */
            this.renderLabel(item)
        })

    }

    // 3.0 创建文本标记物的方法
    renderLabel = (item) => {
        // 调用 map.addOverlay(label);完成文本标记物的创建
        let { longitude, latitude } = item.coord;
        let { label, count, value } = item;
        let opts = {
            position: new BMap.Point(longitude, latitude),
        }
        // 变化点：如果是区和镇数据渲染，则直接使用此div样式，如果是小区的话，则要改变渲染结构了
        let labelObj = null;
        switch (currentLevel) {
            case 1:
            case 2:
                labelObj = new BMap.Label(`<div class="bubble">
                                            <p class="name">${label}</p>
                                            <p>${count}套</p>
                                            </div>`, opts)
                break;

            case 3:
                labelObj = new BMap.Label(`<div class="rect">
                                                <span class="housename">${label}</span>
                                                <span class="housenum">${count}套</span>
                                                <i class="arrow"></i>
                                        </div>`, opts)
                break;

        }


        // 重置labelObj的样式border
        labelObj.setStyle({
            border: 'none'  // 将百度api自动渲染的boder： 1px solid red 给重置成none，可以去掉小红点
        });

        // 给label注册一个点击事件
        labelObj.addEventListener('click', () => {
            if (currentLevel === 3) {
                // 改变状态属性isshow的值为true，就能控制房屋列表显示出来
                this.setState({ isshow: true });

                // 获取校区对应的房屋列表数据
                get_House_List({ cityId: value }).then(list => {
                    console.log('list', list);
                    this.setState({ list: list.list })
                });

                // 注册地图的开始移动事件
                this.map.addEventListener('movestart', () => {
                    this.setState({ isshow: false })
                })
                // console.log('当前已经是最后一层，不再请求数据');
                return;
            }
            // 清除地图上的所有覆盖物
            this.map.clearOverlays()

            // 1.0 判断当前的currentLevel的值如果是1，则修改成2，如果是2则修改成3，用来标记点击事件后的下一次渲染是哪一个级别
            // 2.0 将当前地图的放大级别重新设置为13,重新渲染的中心点就是当前触发事件的标记物所在的经纬度
            let point = new BMap.Point(longitude, latitude)
            switch (currentLevel) {
                case 1:
                    currentLevel = 2;
                    // 变化点2：如果是镇，渲染级别是13，如果是小区渲染级别应该是15
                    this.map.centerAndZoom(point, 13);
                    break;

                case 2:
                    currentLevel = 3;
                    // 变化点2：如果是镇，渲染级别是13，如果是小区渲染级别应该是15
                    this.map.centerAndZoom(point, 15);
                    break;
            }

            // 3.0 获取被点击的文本标记物的id
            let id = value

            // 4.0 获取当前文本标记物的下一级数据
            this.getHouseSource(id)

        })
        this.map.addOverlay(labelObj);
    }

    render() {
        return (<div className="map">
            {/* Navbar的实现 */}
            <NavBar
                mode="light"
                icon={<i className="iconfont icon-back"></i>}
                onLeftClick={() => console.log('onLeftClick')}

            >地图找房</NavBar>

            {/* 地图渲染区域 */}
            <div id="maparea"></div>

            {/* 渲染房屋列表 */}
            {/* <div className={this.state.isshow ? 'houseList show' : 'houseList'}> */}
            <div className={'houseList ' + (this.state.isshow ? 'show' : '')}>
                {/* 头部区域 */}
                <div className="titleWrap">
                    <h1 className="listTitle">房屋列表</h1>
                    <a className="titleMore" href="/home/index">
                        更多房源
            </a>
                </div>
                <div className="houseItems">
                    {/* 内容区域-遍历 */}
                    {
                        this.state.list.length > 0 &&
                        this.state.list.map(item => (
                            <div
                                onClick={() => {
                                    // 跳转到房屋详情页面
                                    this.props.history.push('/info/' + item.houseCode)
                                }}
                                key={item.houseCode}
                                className="house">
                                <div className="imgWrap">
                                    <img
                                        className="img"
                                        src={`https://api-haoke-web.itheima.net${item.houseImg}`}
                                        alt=""
                                    />
                                </div>
                                <div className="content">
                                    <h3 className="title">{item.title}</h3>
                                    <div className="desc">{item.desc}</div>

                                    <div>
                                        {
                                            item.tags.map((tag, index) => (
                                                <span key={tag} className={'tag tag' + ++index}>{tag}</span>
                                            ))
                                        }

                                    </div>
                                    <div className="price">
                                        <span className="priceNum">{item.price}</span> 元/月
                </div>
                                </div>
                            </div>
                        ))
                    }


                </div>


            </div>

        </div>);
    }
}

export default FindHouse;